Ext.define('com.fansy.Galary', {
      alias : 'widget.galary',
      extend : 'Ext.form.Panel',
      opt : undefined,
      initComponent : function() {
        var defaultConfig = {
          border : false,
          frame : true,
          bodyStyle : {
            border : '0px',
            padding: '10px'
          }
        };

        Ext.applyIf(this, defaultConfig);

        this.items = [{
              xtype : 'panel',
              bodyStyle : {
	            	'border': '1px solid #ccc',
					'border-radius': '5px',
					'box-shadow': '0px 0px 5px #ccc'
	          },
              items : [
              {
                    xtype : 'filefield',
                    buttonOnly: true,
                    name : 'pic',
                    buttonConfig : {                    
                    	cls  : this.opt.imageCls,
                    	text : ''
                    },
                    listeners: {
						'change': function(btn, event, v) {
                    		var me = this.up('galary');
                    		var basic =me.getForm();
                    		basic.doAction('submit',{
                    			url: me.opt.basePath + '/rest/upload.json',
                    			method: 'post',
                    			waitMsg: 'Uploading your photo...',
                    			success: function(form,action) {
                    				if(action.result.success==true) {
                    					 Ext.Msg.show({
                                                title:'Success',
                                                msg: Ext.String.format('File:{0} uploaded!', action.result.name) ,
                                                buttons: Ext.Msg.OK,
                                                icon:Ext.Msg.INFO
                                        });
                                        
                                        var imgElement = document.createElement('img');
                                        imgElement.src = action.result.imageUrl;
                                        imgElement.setAttribute('style','width:100px;margin:5px');
                                        var galary = document.getElementById('galary');
                                        galary.innerHTML = '';
                                        galary.appendChild(imgElement);
                    				}
                    			}                    			                    			
                    		});
                    		
                    	}
                    }
              }],
              width : 100,
              height : 100
            }

];
        this.callParent(arguments);
      }
    });